<template>
  <a-modal
    :title="title"
    :width="720"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @ok="handleSubmit"
    @cancel="close"
  >
    <a-spin :spinning="confirmLoading">
      <div style="height:20px"></div>
      <div class="user-selected">
        <div class="hd">选中要赠送优惠券的用户：</div>
        <div class="bd">
          <div class="item" v-for="(item, index) in selectedList" :key="item.user_id" @click="spliceUser(index)">
            <div class="row"><span class="id">会员ID：{{item.user_id}}</span></div>
            <div class="row">
              <img v-if="item.avatar_url" width="45" height="45" :src="item.avatar_url" alt="用户头像" />
              <img v-else width="45" height="45" src="~@/assets/img/default-avatar.png" alt="用户头像" />
              <div>
                <p>{{ item.nick_name }}</p>
                <p>{{ item.mobile }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
        <a-form-item label="昵称/手机号">
          <a-input v-decorator="['search']" placeholder="请输入昵称/手机号" />
        </a-form-item>
        <a-form-item class="search-btn">
          <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
        </a-form-item>
      </a-form>
      <div class="user-list">
        <div class="bd">
          <div class="item" v-for="(item,i) in list" :key="i" @click="selectUser(item)">
            <div class="row"><span class="id">会员ID：{{item.user_id}}</span></div>
            <div class="row">
              <img v-if="item.avatar_url" width="45" height="45" :src="item.avatar_url" alt="用户头像" />
              <img v-else width="45" height="45" src="~@/assets/img/default-avatar.png" alt="用户头像" />
              <div>
                <p>{{ item.nick_name }}</p>
                <p>{{ item.mobile }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import * as Api from '@/api/user'
import * as CouponApi from '@/api/market/coupon'
export default {
  props: {
    coupon: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      // 对话框标题
      title: '',
      // 标签布局属性
      labelCol: {
        span: 7
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 查询参数
      queryParam: {},
      //用户列表数据
      list: [],
      //选中用户
      selectedList: [],
      // 当前表单元素
      searchForm: this.$form.createForm(this),
      // form: this.$form.createForm(this),
    }
  },
  methods: {
    show() {
      this.visible = true
      this.handleRefresh()
    },
    close() {
      this.selectedList = []
      this.searchForm.resetFields()
      this.visible = false
    },
    spliceUser(index) {
      this.selectedList.splice(index, 1)
    },
    selectUser(target) {
      let targetIndex = ''
      this.selectedList.map((item, index) => {
        if (item.user_id == target.user_id) {
          targetIndex = index
        }
      })
      if (typeof targetIndex === 'number') {
        this.selectedList.splice(targetIndex, 1)
      } else {
        this.selectedList.push(target)
      }
    },
    // 确认搜索
    handleSearch (e) {
      e.preventDefault()
      this.searchForm.validateFields((error, values) => {
        if (!error) {
          this.queryParam = { ...this.queryParam, ...values }
          this.handleRefresh(true)
        }
      })
    },
    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh () {
      Api.list({ ...this.queryParam })
        .then(response => {
          this.list = response.data.list.data
        })
    },
    /**
     * 确认按钮
     */
    handleSubmit (e) {
      e.preventDefault()
      if (this.selectedList.length === 0) {
        this.$message.error('请选择赠送用户', 1.8)
      } else {
        this.onFormSubmit()
      }
    },
    
    /**
    * 提交到后端api
    */
    onFormSubmit () {
      this.confirmLoading = true
      let promiseArray = this.selectedList.map(item => {
        return CouponApi.send({
          couponId: this.coupon.coupon_id,
          user_id: item.user_id
        })
      })
      Promise.all(promiseArray).then(() => {
        this.$message.success('赠送成功', 1.5)
        this.confirmLoading = false
        this.close()
      }).catch(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.user-selected {
  .hd {
    color: #333;
    font-weight: bold;
  }
  .bd {
    padding: 10px 0 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .item {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    border: 1px solid #61C97C;
    margin-right: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 6px;
    .row {
      width: 100%;
      display: flex;
      color: #555;
      line-height: 16px;
      .id {
        color: #000;
        padding-bottom: 2px;
      }
      img {
        margin-right: 10px;
        width: 30px;
        height: 30px;
      }
    }
  }
}
.user-list {
  .item {
    display: inline-block;
    width: 48%;
    vertical-align: top;
    font-size: 13px;
    border: 1px solid #e2e2e2;
    margin: 5px 4px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 6px;
    .row {
      width: 100%;
      display: flex;
      color: #555;
      line-height: 20px;
      .id {
        padding-bottom: 4px;
        color: #000;
        font-weight: 50;
      }
      img {
        margin-right: 10px;
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>